Vue.component('v-editer', {
    props: {
        
    },
    data: function () { 
        return {
            eleTitle: "",
            eleTitle1: "",
            eleTitle2: "",
            eleTitle3: "",
            eleTitle4: "",
            titChangeST:null,
            currentEleId:0,
            currentEle:null,
            show:false,
        }
    },
    watch: {
        'eleTitle': function () {
            /* 节流防抖 */
            console.log('sdfsdf')
            clearTimeout(this.titChangeST)
            this.titChangeST = setTimeout(function () {
                localStorage.setItem(this.currentEleId+"T",this.eleTitle)
            }.bind(this),100)
        },
        'eleTitle1':function(){
            this.eleTitChange(1)
        },
        'eleTitle2':function(){
            this.eleTitChange(2)
        },
        'eleTitle3':function(){
            this.eleTitChange(3)
        },
        'eleTitle4':function(){
            this.eleTitChange(4)
        }
    },
    mounted: function () {
        var editor = CKEDITOR.replace('ck_editor');
        editor.on( 'change', function( evt ) {
            // console.log(evt.editor.getData());
            if (this.currentEleId > 0) {
                localStorage.setItem(this.currentEleId+"C",evt.editor.getData())
            }
        }.bind(this));

        /* 弹出编辑面板 */
        App.eventBus.$on("elementEdit", function (scope) {
            console.log(scope)
            this.currentEle = scope;
            this.currentEleId = scope.id;
            this.show = true;
            this.eleTitle = localStorage.getItem(this.currentEleId + "T") || '';
            /* 读取存储相邻标题 */
            var bMap = this.currentEle.bindmap;
            bMap.forEach(function(it,index){
                if(it[0]>0){
                    this['eleTitle'+(index+1)] = localStorage.getItem(it[0] + "T") || '';
                }else{
                    this['eleTitle'+(index+1)] = '';
                }
            }.bind(this))
            /* 初始化存储本模块内容 */
            var hsData = localStorage.getItem(this.currentEleId+"C")||'';
            editor.setData(hsData)
        }.bind(this))
    },
    methods: {
        rlTitInputShow: function (dir) {
            return this.currentEle&&this.currentEle.bindmap[dir-1][0]>0;
        },
        eleTitChange:function(dir){
            localStorage.setItem(this.currentEle.bindmap[dir-1][0]+"T",this['eleTitle'+dir])
        }
    },
    template: '<div class="editerWrap" v-show="show">\
                <div class="main">\
                    <i class="close" @click="show=false">关闭</i>\
                    <p style="margin-bottom:20px;"><input v-model="eleTitle" placeholder="请输入本模块标题" /></p>\
                    <div>\
                        <textarea name="editor1" id="ck_editor" rows="10" cols="80">\
                        </textarea>\
                    </div>\
                    <div class="rlTitles" v-if="rlTitInputShow(1)||rlTitInputShow(2)||rlTitInputShow(3)||rlTitInputShow(4)">\
                        <input style="margin:-80px 0px 0px -115px;" v-if="rlTitInputShow(1)" v-model="eleTitle1" placeholder="请输入关联1模块标题" />\
                        <input style="margin:-18px 0 0px 40px;" v-if="rlTitInputShow(2)" v-model="eleTitle2" placeholder="请输入关联2模块标题" />\
                        <input style="margin:44px 0px 0px -115px;" v-if="rlTitInputShow(3)" v-model="eleTitle3" placeholder="请输入关联3模块标题" />\
                        <input style="margin:-18px 0 0px -270px;" v-if="rlTitInputShow(4)" v-model="eleTitle4" placeholder="请输入关联4模块标题" />\
                        <span class="cc">\
                            <i style="left:20px;top:0;">1</i>\
                            <i style="left:40px;top:20px;">2</i>\
                            <i style="left:20px;top:40px;">3</i>\
                            <i style="left:0;top:20px;">4</i>\
                        </span>\
                    </div>\
                </div>\
            </div>'
})